import './style.css'
import {
    IconLyrics, IconPlayArrowFill,
    IconQueueMusic,
    IconRepeat,
    IconShare, IconSkipNext,
    IconSkipPrevious,
    IconThumbDown,
    IconVolumeUp
} from "../../icons/index.js";
import {progressRender} from "../progress/render.js";
import {GlobalAudioPlayer} from "../../services/useAudioPlayer/index.js";

export function footerRender() {
    return `
<div class="footer">
  ${progressRender()}

  <div class="other-controls row align-items-center">
      <div class="col"></div>
      
      <div class="col-auto control-icon">
        ${IconShare()}
      </div>
      <div class="col-auto control-icon">
        ${IconThumbDown()}
      </div>
      <div class="col-auto control-icon">
        ${IconLyrics()}
      </div>
      <div class="col-auto control-icon">
        ${IconRepeat()}
      </div>
      <div class="col-auto control-icon">
        ${IconVolumeUp()}
      </div>
      <div class="col-auto control-icon">
        ${IconQueueMusic()}
      </div>
  </div>
  

  <div class="play-controls row align-items-center">
    <div class="col-auto control-icon" onclick="GlobalAudioPlayer.prev(this)">
      ${IconSkipPrevious({size: 32})}
    </div>
    <div class="col-auto control-icon play-button" onclick="GlobalAudioPlayer.toggle(this)">
      ${IconPlayArrowFill({size: 32})}
    </div>
    <div class="col-auto control-icon" onclick="GlobalAudioPlayer.next(this)">
      ${IconSkipNext({size: 32})}
    </div>
  </div>
</div>
`
}